import Vue from 'vue'
import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/home'
import about from '@/components/about'
import page from '@/components/page'
import noFound from '@/components/404'
import slider from '@/components/slider'
import user from '@/components/user'

import page1 from '@/view/page1'
import page2 from '@/view/page2'
import page3 from '@/view/page3'

Vue.use(Router)

let router = new Router({
  mode: 'history',
  linkActiveClass: 'is-active',
  scrollBehavior(to,from,savePosition){ // 点击浏览器的前进后退或切换导航触发
    //console.log(to); // 要进入的目标路由对象 要去向哪里
    //console.log(from) // 离开的路由对象  从哪里来
    //console.log(savePosition) // 记录滚动条的坐标 点击前进后退的时候记录值

    /*if(savePosition){
      return savePosition;
    }else{
      return {x:0,y:0}
    }*/

    if( to.hash){
      return {
        selector: to.hash
      }
    }

  },
  scrollBehavior (to, from, savedPosition) {	//滚动行为:当点击浏览器前进后退或切换导航时触发
//		console.log(to);		//要进入的目标路由对象
//		console.log(from);	//离开的路由对象
//		console.log(savedPosition);  //记录滚动条的坐标    点击浏览器前进后退时才触发
	  	
	//	if(savedPosition){
	//		return savedPosition;
	//	}else{
	//  	return { x: 0, y: 0 }
	//	}
	
//		return { x: 0, y: 0 }
		//savedPosition这玩意貌似没有用啊
		
		//用hash(哈希)来处理锚点定位
		if(to.hash){
			return {
				selector:to.hash
			}
		}
	},
  routes: [
    {
      path: '/user/:tip?/:userId?',
//    name: user,
      component: user,
      meta:{
          index:4,
          login:true,
          title:"user"
      }
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld,
      redirect: '/',
      meta:{
          index:3,
          title:"hello"
      }
    },
    {
      path: '/',
      component: Home,
      meta:{
          index:0,
          title:'首页'
      }
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
      alias: '/index'		//定义别名，用别名访问的时候，导航不会高亮
    },
    {
      path: '/about',
      name: 'about',
      components: {		//命名视图
      	default: about,
      	slider: slider
      },
      meta:{
          index:1,
          title:'about'
      },
      beforeEnter(to,from,next){
          console.log("单个路由---beforeEnter")
          next()
      }
    },
    {
      path: '/page',
//    name: 'page',  //设置了默认子路由，就不能再设置name了
      component: page,
      children: [
        {
          path: '',		//默认的子路由  /page
          name: 'page1',
          component: page1,
          meta:{
              index:2,
              title:'page'
          },
          beforeEnter(to,from,next){
              console.log("单个路由---beforeEnter")
              next()
          }
        },
        {
          path: 'page2',
          name: 'page2',
          component: page2
        },
        {
          path: 'page3',
          name: 'page3',
          component: page3
        }
      ]
//    children: [
//      {
//        path: '/page1',
//        name: 'page1',
//        component: page1
//      },
//      {
//        path: '/page2',
//        name: 'page2',
//        component: page2
//      },
//      {
//        path: '/page3',
//        name: 'page3',
//        component: page3
//      }
//    ]
    },
    {
      path: '/noFound',
      component: noFound,
      name: noFound,
      meta:{
          title:'noFound'
      }
    },
    {
      path: '*',
        component: noFound
      
      // 重定向
      //redirect: '/home'
      //redirect: {path: '/home'}
      // redirect: {name: 'About'}
      
//    redirect: (to) => {  //动态设置重定向的目标
//      // 目标路由对象，就是访问的路径的路由信息
//
//      if( to.path === '/123') {
//        return '/'
//      }else if(to.path === '/456'){
//        return {path: '/page'}
//      }else{
//        return {path: '/noFound' }
//      }
//
//      console.log(to)
//    }
    }
  ]
})
//【全局钩子函数】
router.beforeEach((to,from,next)=>{
    console.log("router全局-beforeEach")
//  next()
//  next(false)

    if(to.meta.login){
        next('/login')
    }else{
        next()
    }
})

router.afterEach((to,from)=>{
    console.log("router全局-afterEach")
    if(to.meta.title){
        window.document.title = to.meta.title
    }else{
        window.document.title = '我的网站'
    }
    
})

export default router
